<template>
  <div class="venus-list-page">
    <!--签约查询界面-->
    <div class="page-search">
      <el-form label-width="160px" style="margin: 20px 50px 20px 0px;" size="mini">
        <el-row type="flex" class="list-items">
          <el-col :span="8">
            <el-form-item label="市场:">
              <el-select v-model="table.fund_table.market" class="venus-input-middle" filterable clearable placeholder="--请选择--">
                <el-option v-for="(value,key,index) in dict.market" :key="index" :label="value" :value="key" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="基金代码:">
              <el-select v-model="table.fund_table.fund_code" class="venus-input-middle" filterable clearable
                placeholder="请选择">
                <el-option v-for="item in dict.fundCode" :label="item.text" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="基金名称:">
              <el-input v-model="table.fund_table.fund_name" class="venus-input-middle" placeholder="请输入基金名称" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="16">
            <el-form-item label="估值日期:">
              <el-date-picker v-model="table.fund_table.begindate" type="date" class="venus-input-middle venus-input-date"
                value-format="yyyyMMdd" placeholder="请输入起始日期" />
              -
              <el-date-picker v-model="table.fund_table.enddate" type="date" class="venus-input-middle venus-input-date"
                value-format="yyyyMMdd" placeholder="请输入截止日期" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <div class="venus-btn-box" style="text-align: center;">
            <el-button type="success" @click="search">查询</el-button>
            <el-button type="info" @click="resetForm">重置</el-button>
            <el-button type="success" @click="addBean">新增</el-button>
          </div>
        </el-row>
      </el-form>
    </div>
    <!--    查询列表返显-->
    <div class="page-list">
      <el-row type="flex" justify="space-between" class="page-list-head">
        <div class="title">查询结果</div>
      </el-row>
      <table-pagination :table-data="table.fund_table.tableData" :table-header-config="table.tableHeaderConfig"
        highlight-current-row :total="table.fund_table.total" :page-size="table.fund_table.limit" :now-page="table.fund_table.nowPage"
        :operation-config="table.operationConfig" @current-change="handleCurrentChange" />
    </div>

    <!-- 模态框 -->
    <el-dialog :title="form.fund_form.title" :form-type="form.type" :visible.sync="form.fund_form.dialogFormVisible" v-dialogDrag>
      <el-form :model="form.fund_form" size="mini" :rules="form.fund_form.rules" ref="ruleForm">
        <el-input type="hidden" v-model="form.fund_form.id" />
        <el-row type="flex">
          <el-col>
            <el-form-item label="市场" :label-width="style.formLabelWidth" prop="market">
              <el-select v-model="form.fund_form.market" placeholder="请选择市场" filterable clearable @change="marketchange"
               v-bind:disabled="form.type != 1" >
                <el-option v-for="(value,key,index)  in dict.market" :key="index" :label="value" :value="key" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="基金代码" :label-width="style.formLabelWidth" prop="fund_code">
              <el-select v-model="form.fund_form.fund_code" placeholder="请选择" filterable clearable @change="fund_code_change"
              v-bind:disabled="form.type != 1">
                <el-option v-for="item in dict.fundCode" :label="item.text" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col>
            <el-form-item label="基金名称" :label-width="style.formLabelWidth" prop="fund_name">
              <el-input v-model.trim="form.fund_form.fund_name" disabled />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="基金类型" :label-width="style.formLabelWidth" prop="fund_type">
              <el-input v-model.trim="form.fund_form.fund_type" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col>
            <el-form-item label="估值日期" :label-width="style.formLabelWidth" prop="settle_date">
              <el-date-picker v-model="form.fund_form.settle_date" value-format="yyyyMMdd" type="date" placeholder="选择日期"
              v-bind:disabled="form.type != 1">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="估值净值(元)" v-show="form.fund_form.fund_type != 5" :label-width="style.formLabelWidth"
              prop="price">
              <el-input v-model="form.fund_form.price" type="number" v-bind:disabled="form.type == 3"/>
            </el-form-item>
            <el-form-item label="万分收益(元)" v-show="form.fund_form.fund_type == 5" :label-width="style.formLabelWidth"
              prop="income">
              <el-input v-model="form.fund_form.income" type="number" v-bind:disabled="form.type == 3"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="万分收益(元)" v-show="form.fund_form.fund_type == 5" :label-width="style.formLabelWidth"
              prop="seven_rate">
              <el-input v-model="form.fund_form.seven_rate" type="number" v-bind:disabled="form.type == 3"/>
            </el-form-item>
          </el-col>
        </el-row>


      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button type="success" v-show="form.type != 3" @click="save('ruleForm')">确 定</el-button>
        <el-button type="info" v-show="form.type != 3" @click="closeForm('ruleForm')">取 消</el-button>
        <el-button type="info" v-show="form.type == 3" @click="closeForm('ruleForm')">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  /* 自定义数据加载 */
  import request from '@/utils/request'
  import * as kk from '@/utils/k-utils'
  import '@/utils/directives'

  export default {
    name: 'BondInfo',
    data() {
      return {
        dict: {
          market: [],
          fundCode: []
        },
        table: {
          operationConfig: { // 表格操作配置
            fixed: 'left',
            width: 200,
            operationButton: [
              // 每一个操作。value:操作文字；func:回调函数
              {
                value: '修改',
                func: this.myModify
              },
              {
                value: '删除',
                func: this.myDelete
              },
              {
                value: '详情',
                func: this.myDetail
              }
            ]
          },
          tableHeaderConfig: [ // 表头配置
            {
              prop: 'market',
              label: '市场'
            },
            {
              prop: 'fund_code',
              label: '基金代码'
            },
            {
              prop: 'fund_name',
              label: '基金名称'
            },
            {
              prop: 'fund_type',
              label: '基金类型'
            },
            {
              prop: 'settle_date',
              label: '估值日期'
            },
            {
              prop: 'price',
              label: '单位净值(元)'
            },
            {
              prop: 'income',
              label: '万份收益(元)'
            },
            {
              prop: 'seven_rate',
              label: '七日年化收益率(%)'
            }
          ],
          fund_table: {
            limit: 5,
            total: 0,
            nowPage: 0,
            tableData: [], // 表格数据
            exeid: 'M8220EQ001',
            //查询参数
            market: '',
            fond_name: '',
            fund_code: '',
            begindate: '',
            enddate: ''
          }
        },
        form: {
          /* 模态框类型 1新增，2修改，3详情*/
          type: '',
          fund_form: {
            id: '',
            settle_date: '',
            market: '',
            fund_code: '',
            fund_name: '',
            fund_type: '',
            price: '',
            income: '',
            seven_rate: '',
            dialogFormVisible: false,
            rules: {
              market: [{
                required: true,
                message: '该项不允许为空',
                trigger: 'blur'
              }],
              fund_code: [{
                required: true,
                message: '该项不允许为空',
                trigger: 'blur'
              }],
              fund_name: [{
                required: true,
                message: '该项不允许为空',
                trigger: 'blur'
              }],
              fund_type: [{
                required: true,
                message: '该项不允许为空',
                trigger: 'blur'
              }],
              settle_date: [{
                required: true,
                message: '该项不允许为空',
                trigger: 'blur'
              }]/* ,
              price: [{
                required: true,
                message: '该项不允许为空',
                trigger: 'blur'
              }],
              income: [{
                required: true,
                message: '该项不允许为空',
                trigger: 'blur'
              }],
              seven_rate: [{
                required: true,
                message: '该项不允许为空',
                trigger: 'blur'
              }] */
            }
          }
        },
        style: {
          formLabelWidth: '120px',
        }
      }
    },
    mounted() {
      // 初始化调用
      this.init()
    },
    methods: {
      init: function() {
       /* this.table.fund_table.tableData=[{market: '3',fund_code:'zcs',fund_name:'zcs',fund_type:'3',settle_date:'20190914',
        price:'34',income: '66',seven_rate:'54'}] */
        kk.k_load_dict(this, 'market', 't8_market_place')
        var params = {}
        kk.k_load_exeid('fund', 'M826EQ001', params).then(rep => {
          if (rep.rows.length > 0) {
            this.dict.fundCode = rep.rows
          }
        })


        this.table.fund_table.nowPage = 1
        kk.k_load_table(this, 'fund_table', 'fund')
      },
      search() { // 查询函数
        this.table.fund_table.nowPage = 1
        kk.k_load_table(this, 'fund_table', 'fund')

      },
      resetForm() {
        this.table.fund_table.market = ''
        this.table.fund_table.fund_name = ''
        this.table.fund_table.fund_code = ''
        this.table.fund_table.begindate = ''
        this.table.fund_table.enddate = ''
      },
      resetTable(){
        //从新加载表格数据
        kk.k_load_table(this, 'fund_table', 'fund')
      },
      myModify(item, index) {
        this.form.type = '2'
        this.form.fund_form.title = '修改基金估值信息'
        this.form.fund_form.dialogFormVisible = true
        // 赋值
        this.copyObj(item, this.form.fund_form)

      },
      myDelete(item, index) {
        //若该估值日期之后存在基金交易，则提示是否继续删除
        var flag = true
      /*    kk.k_load_exeid('fund', 'M8220EQ004', item).then(rep => {
          if (rep.rows.length > 0 && rep.rows[0].count > 0) {
            flag = false
          }
        }) */
        if (flag){
          kk.k_update_exeid('fund', 'M8220ED001', item).then(rep => {

          })
          this.resetTable()
        } else {
             this.$confirm('估值日期之后存在基金交易，是否继续删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {
                    kk.k_update_exeid('fund', 'M8220ED001', item).then(rep => {

                    })
                    this.resetTable()
                  }).catch(() => {
                    this.$message({
                      type: 'info',
                      message: '已取消删除'
                    });
                  });
        }

      },
      myDetail(item, index) {
        this.form.type = '3'
        this.form.fund_form.title = '基金行情详情信息'
        this.form.fund_form.dialogFormVisible = true
        // 赋值
        this.copyObj(item, this.form.fund_form)
      },
      //打开新增模态框
      addBean() {
        //清空数据
        this.copyObj({
            id:'',
            settle_date: '',
            market: '',
            fund_code: '',
            fund_name: '',
            fund_type: '',
            price: '',
            income: '',
            seven_rate: ''}, this.form.fund_form)
        this.form.type = '1'
        this.form.fund_form.title = '新增基金估值信息'
        this.form.fund_form.dialogFormVisible = true
      },
      handleCurrentChange(val) {
        this.table.fund_table.nowPage = val
        kk.k_load_table(this, 'fund_table', 'fund')
      },
      // ======================弹出框======================
      copyObj(obj1, obj2) {
        for (var key in obj1) {
          // 原型对象不拷贝
          if (key === '__proto__') {
            continue
          }
          // 不存在的属性不拷贝
          if (!obj2.hasOwnProperty(key)) {
            continue
          }
          // 自动将number转换成string
          if (typeof obj1[key] === 'number') {
            obj1[key] = '' + obj1[key]
          }
          obj2[key] = obj1[key]
        }
      },
      save(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var params = this.form.fund_form
            if (this.form.type == '1') {
              //新增
              kk.k_update_exeid('fund', 'M8220EU001', params).then(rep => {
               /* this.$refs[formName].resetFields() */
                this.form.fund_form.dialogFormVisible = false
              })
              this.resetTable()
            } else if (this.form.type == '2') {
              //修改
              kk.k_update_exeid('fund', 'M8220EU002', params).then(rep => {
                this.$refs[formName].resetFields()
                this.form.fund_form.dialogFormVisible = false
              })
              this.resetTable()
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },
      closeForm(formName) {
        this.$refs[formName].resetFields()
        this.form.fund_form.dialogFormVisible = false

      },
      marketchange() {
        this.form.fund_form.fund_code = null
        this.form.fund_form.fund_name = null
        this.form.fund_form.fund_type = null

      },
      fund_code_change() {
        var params = {}
        params.market = this.form.fund_form.market
        params.fund_code = this.form.fund_form.fund_code
       if (params.market && params.fund_code){
        kk.k_load_exeid('fund', 'M8220EQ003', params).then(rep => {
          if (rep.rows.length > 0) {
            this.form.fund_form.fund_name = rep.rows[0].fund_name
            this.form.fund_form.fund_type = rep.rows[0].fund_type
          }
        })
        }
      }
    }
  }
</script>

<style scoped>
  /*让文本可以被选中*/
  .venus-list-page {
    -moz-user-select: text;
    /*火狐*/
    -webkit-user-select: text;
    /*webkit浏览器*/
    -ms-user-select: text;
    /*IE10*/
    -khtml-user-select: text;
    /*早期浏览器*/
    user-select: text;
  }
</style>
